// 导入 React 库中的 useState 和 useEffect 钩子
import React, { useState, useEffect } from'react';
// 导入自定义的 AI 样式文件
import './AI.scss';
import {
    AudioOutlined,
    LoadingOutlined,
} from '@ant-design/icons';
import AI_response from '../AI_response/Index';

// 定义一个名为 VoiceAssistant 的函数式组件
const VoiceAssistant: React.FC = () => {
    // 使用 useState 钩子来管理组件的状态
    const [img, setImg] = useState(true);
    const [flag, setFlag] = useState(false);
    const [isRecording, setIsRecording] = useState(false);
    const [transcript, setTranscript] = useState('');
    const [showLoadingIcon, setShowLoadingIcon] = useState(false);
    // 创建一个数组来存储识别后的文字
    const [transcriptList, setTranscriptList] = useState<string[]>([]);
    // 新增状态来存储输入框的值
    const [inputValue, setInputValue] = useState('');

    // 在组件挂载时，从本地存储读取数据并初始化数组
    useEffect(() => {
        const storedTranscripts = localStorage.getItem('transcriptList');
        if (storedTranscripts) {
            setTranscriptList(JSON.parse(storedTranscripts));
        }
    }, []);

    // 使用 useEffect 钩子，当依赖项 [isRecording] 发生变化时执行副作用函数
    useEffect(() => {
        localStorage.setItem('video', 'true');
        const recognition = new (window.webkitSpeechRecognition || window.SpeechRecognition)();
        recognition.lang = 'zh-CN';

        recognition.onstart = () => {
            console.log('开始录音');
        };

        recognition.onresult = (event: SpeechRecognitionEvent) => {
            const newTranscript = event.results[0][0].transcript;
            setTranscript(newTranscript);
            // 提取新的 transcriptList 到一个变量
            const newTranscriptList = [...transcriptList, newTranscript];
            // 将新识别的文字添加到数组中
            setTranscriptList(newTranscriptList);
            // 保存到本地存储
            localStorage.setItem('transcriptList', JSON.stringify(newTranscriptList));
            console.log('识别出的文本:', newTranscript);
        };

        // 定义错误消息映射
        const errorMessages: { [key: string]: string } = {
            'not-allowed': '用户未授予麦克风权限',
            'audio-capture': '未检测到音频输入',
            'network': '网络错误',
            'no-speech': '未检测到语音',
            'service-not-allowed': '服务不允许',
            'bad-grammar': '语法错误',
            'language-not-supported': '不支持的语言',
        };

        recognition.onerror = (error: SpeechRecognitionError) => {
            console.log('语音识别出错:', error.error);
            const message = errorMessages[error.error];
            if (message) {
                console.log(message);
            }
        };

        recognition.onend = () => {
            setIsRecording(false);
            setShowLoadingIcon(false);
            // 删除本地仓库中的 video
            localStorage.removeItem('video');
            console.log('录音结束');
        };

        if (isRecording) {
            recognition.start();
            setShowLoadingIcon(true);
        }

        return () => {
            recognition.stop();
        };
    }, [isRecording]); // 只保留 isRecording 作为依赖项

    const startRecording = () => {
        setIsRecording(true);
    };

    const stopRecording = () => {
        setIsRecording(false);
    };

    const RevImg = () => {
        setImg(!img);
        setFlag(true);
        if (isRecording) {
            stopRecording();
        } else {
            startRecording();
        }
    };

    // 点击确认按钮的处理函数
    const handleSubmit = () => {
        if (inputValue.trim()!== '') {
            const newTranscriptList = [...transcriptList, inputValue];
            setTranscriptList(newTranscriptList);
            localStorage.setItem('transcriptList', JSON.stringify(newTranscriptList));
            setInputValue('');
        }
    };

    const handleSubmits = () => {
        // 清除本地仓库中的聊天记录后重新加载当前页
        window.location.reload();
        localStorage.removeItem('transcriptList');
    };

    // 处理键盘按下事件
    const handleKeyDown = (e) => {
        if (e.key === 'Enter') {
            handleSubmit();
        }
    };

    return (
        <div className='Al_container_box'>
            <button onClick={handleSubmits}>清除聊天记录</button>
            <div className='Al_text'>在这里你可以和小爱同学聊天</div>
            <div className='Al_chat'>
                <div className='Al_chat_left'>
                    {/* 这是 Ai 回答区域 */}
                    <AI_response />
                </div>
                <div className='Al_chat_right'>
                    {/* 这是用户输入的文字 */}
                    {/* 循环渲染识别后的文字 */}
                    {transcriptList.map((text, index) => (
                        <p key={index}>{text}</p>
                    ))}
                    {/* 这里是用户打字发送的消息 */}
                    {/* <p>这里显示内容区域的提示文字</p> */}
                </div>
            </div>
            <div className='Al_toolbar'>
                {showLoadingIcon? (
                    <LoadingOutlined onClick={RevImg} className="Al_Audio_icon" />
                ) : (
                    <AudioOutlined onClick={RevImg} className="Al_Audio_icon" />
                )}
                <input
                    type="text"
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    onKeyDown={handleKeyDown} // 添加键盘按下事件监听器
                    placeholder="输入您的问题"
                    className='Al_input'
                />
                <button type="submit" className='Al_btn' onClick={handleSubmit}>
                    发送
                </button>
            </div>
        </div>
    );
};

export default VoiceAssistant;